// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory } from "vue-router";
// 引入组件
import Home from '../components/Home.vue'
import News from '../components/News.vue'
import About from '../components/About.vue'
import Detail from '../components/Detail.vue'
import Count from '../components/Count.vue'

// 第二步：创建路由器
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/news',
      component: News,
      // 嵌套路由
      children: [
        {
          path: 'detail/:id/:title/:content?',
          name: 'detail',
          component: Detail,
          // props: true, // 传参方式二，使用这种方式(路由跳转时必须用params传参)配合defineProps使用，就不用useRoute接收了

          // props传参还可以写成一个函数，使用这种方式路由跳转时既可以用query传参，也可以用params传参
          props(route) {
            console.log(35, route)
            return {
              ...route.params
            }
          },

          // props传参还可以写成一个对象, 但是这样只能写死数据了
          // props: {
          //   id: 1,
          //   title: '新闻标题',
          //   content: '新闻内容'
          // }
        },
      ]
    },
    {
      path: '/count',
      name: 'count',
      component: Count
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
  ]
})

export default router